<template>
  <div class="order_list">
    <div class="common_form_search">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="searchForm"
      >
        <el-form-item label="订单号">
          <el-input
            v-model="searchForm.orderNo"
            style="width:220px"
            placeholder="请输入订单号"
            clearable
          />
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input
            v-model="searchForm.goodsName"
            placeholder="请输入商品名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="用户名">
          <el-input
            v-model="searchForm.receivingName"
            placeholder="请输入用户名"
            clearable
          />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input
            v-model="searchForm.receivingMobile"
            placeholder="请输入手机号"
            clearable
          />
        </el-form-item>
        <el-form-item label="风控姓名">
          <el-input
            v-model="searchForm.riskName"
            placeholder="请输入风控姓名"
            clearable
          />
        </el-form-item>
        <el-form-item label="风控手机号">
          <el-input
            v-model="searchForm.riskMobile"
            placeholder="请输入风控手机号"
            clearable
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="searchForm.orderStatus"
            placeholder="全部"
            clearable
          >
            <el-option
              v-for="item in selectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <my-date-picker ref="myDatePicker" />
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="search()"
          >查询</el-button>
          <el-button
            size="small"
            @click="reset()"
          >重置</el-button>
          <el-button
            v-if="$hasMethod('#export')"
            size="small"
            type="warning"
            @click="exportFile()"
          >导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider />
    <div class="child_page">
      <el-tabs
        v-model="activeName"
        class="flex-1 nav_tabs"
        @tab-click="handleClick"
      >
        <el-tab-pane
          v-for="item in tabList"
          :key="item.id"
          :label="`${item.name}(${item.count})`"
          :name="item.id"
        />
      </el-tabs>
      <div class="list_wrap">
        <div class="flex list_header">
          <p style="width:27%;padding-left:20px">商品信息</p>
          <p
            class="text-center"
            style="width:3%"
          >数量</p>
          <p
            class="text-center"
            style="width:10%"
          >租金</p>
          <p
            class="text-center"
            style="width:9%"
          >租期</p>
          <p
            class="text-center"
            style="width:8%"
          >押金</p>
          <p
            class="text-center"
            style="width:15%"
          >实付金额</p>
          <p
            class="text-center"
            style="width:5%"
          >是否买断</p>
          <p
            class="text-center"
            style="width:7%"
          >下期付款金额</p>
          <p style="width:16%;padding-left:20px">收货人信息</p>
        </div>
        <div
          v-for="item in tableData"
          :key="item.id"
          class="list_item"
        >
          <div class="flex justify-between align-center item_header">
            <el-tag :type="getOrderStatusType(item.status)">{{ item.statusName }}</el-tag>
            <div class="flex-1 flex align-center">
              <p>ID：{{ item.id }}</p>
              <p>创建时间：{{ item.create_time }}</p>
              <p>订单号：{{ item.trade_no }}</p>
              <p class="sign_icons">
                <!-- <el-tooltip
                  class="item"
                  effect="dark"
                  content="承租人合同签署中"
                  placement="top-start"
                >
                  <img
                    v-if="item.guarantee_status==1"
                    src="../../assets/images/db-signing.png"
                    alt="承租人合同签署中"
                  >
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="承租人合同已签署"
                  placement="top-start"
                >
                  <img
                    v-if="item.guarantee_status==2"
                    src="../../assets/images/db-signed.png"
                    alt="承租人合同已签署"
                  >
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="承租人合同未签署"
                  placement="top-start"
                >
                  <img
                    v-if="item.guarantee_status!=1&&item.guarantee_status!=2"
                    src="../../assets/images/db-unsign.png"
                    alt="承租人合同未签署"
                  >
                </el-tooltip> -->
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="合同未签署"
                  placement="top-start"
                >
                  <img
                    v-if="item.sign_status!=1&&item.sign_status!=2"
                    src="../../assets/images/unsign.png"
                    alt="合同未签署"
                  >
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="合同签署中"
                  placement="top-start"
                >
                  <img
                    v-if="item.sign_status==1"
                    src="../../assets/images/signing.png"
                    alt="合同签署中"
                  >
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="合同已签署"
                  placement="top-start"
                >
                  <img
                    v-if="item.sign_status==2"
                    src="../../assets/images/signed.png"
                    alt="合同已签署"
                  >
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="续租订单"
                  placement="top-start"
                >
                  <img
                    v-if="item.is_renewal==1"
                    src="../../assets/images/renew.png"
                    alt="续租订单"
                  >
                </el-tooltip>
              </p>
              <p>订单来源：{{ item.source }}</p>
              <p>快递信息：
                <!-- <span
                  class="blue-font pointer"
                  @click="checkLogistics(item.id)"
                > -->
                {{ item.logistic.delivery_type==2?'上门自取':item.logistic.delivery_type==3?'上门安装':item.logistic.logistics_no?`${item.logistic.logistics_no}(${item.logistic.logistics_name})`:'无' }}
                <!-- </span> -->
              </p>
            </div>
            <p>
              <!-- <el-button
                type="primary"
                size="mini"
              >订单设置</el-button> -->
            </p>
          </div>
          <div class="flex item_row">
            <div
              class="flex"
              style="width:27%"
            >
              <el-image
                style="width:100px;height:100px"
                :src="item.imgurl?$globalObj.imgBaseUrl+item.imgurl:''"
              >
                <div
                  slot="error"
                  class="image-slot"
                >
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
              <div
                class="flex-1"
                style="padding-left:10px;overflow:hidden;"
              >
                <p class="title blue-font">{{ item.goods_title }}</p>
                <p class="meal">套餐信息：{{ item.change_setmeal_title ? item.change_setmeal_title : item.setmeal_title }}
                  <el-button
                    v-if="$hasMethod('#editDevice')"
                    size="mini"
                    class="border-btn"
                    style="margin-left:5px"
                    @click="editSetmeal(item)"
                  >更改</el-button>
                </p>
                <p v-if="item.change_setmeal" class="meal">原套餐信息：{{ item.setmeal_title }}</p>
                <p class="meal">租赁方式：{{ item.pact_type }}</p>
                <p class="device">设备编号：{{ item.device_number }}
                  <el-button
                    v-if="$hasMethod('#editDevice')"
                    size="mini"
                    class="border-btn"
                    style="margin-left:5px"
                    @click="editDevice(item)"
                  >更改</el-button>
                </p>
                <p class="device">拿货价格：{{ item.device_true_price }}
                  <el-button
                    size="mini"
                    class="border-btn"
                    style="margin-left:5px"
                    @click="editGoodTruePrice(item)"
                  >更改</el-button>
                </p>
              </div>
            </div>
            <div
              class="flex flex-center color-666 font-16"
              style="width:3%;"
            >x{{ item.amount }}</div>
            <div
              class="flex flex-column flex-center"
              style="width:10%"
            >
              <p class="red-font">￥{{ item.rent_total }}(共{{ item.month_total }}期)</p>
              <!-- <p class="color-666">￥{{(item.rent_total/item.month_total).toFixed(2)}}({{item.month_total}}期)</p> -->
              <p style="margin-top:10px">
                <el-button
                  v-if="$hasMethod('#checkLease')"
                  size="mini"
                  class="border-btn"
                  @click="viewLease(item.id)"
                >查看租期</el-button>
              </p>
            </div>
            <div
              style="width:9%"
              class="color-666 font-12 flex flex-center"
            >
              {{ item.begin_time }}至{{ item.end_time }}(共{{ item.month_total }}期)
            </div>
            <div
              style="width:8%"
              class="flex flex-column flex-center"
            >
              <p
                v-if="item.rights_auth_no"
                class="red-font"
              >￥{{ item.foregift }}</p>
              <p class="color-999 font-12">{{ !item.rights_auth_no?'未授权免押':item.foregift_deduct==0?'押金冻结':item.foregift>0?'部分免押':'押金全免' }}</p>
              <p
                v-if="item.foregift_deduct>0"
                class="color-999 font-12"
                style="text-decoration:line-through;"
              >￥{{ parseFloat(item.foregift)+parseFloat(item.foregift_deduct) }}</p>
            </div>
            <div
              style="width:15%"
              class="flex flex-column flex-center"
            >
              <p class="red-font">￥{{ item.lease.paid_rent }}</p>
              <p class="color-999 font-12">{{ item.pay_type==1?'智能合同代扣':item.pay_type==2?'芝麻信用（'+(item.rights_auth_no!=0?'已授权代扣':'未授权代扣')+'）':'花呗' }}</p>
              <p style="margin-top:5px" class="color-999 font-12 bold-font">
                <!-- <el-button
                  size="mini"
                  type="success"
                  class="long-text-btn"
                  @click="checkPaidBill(item.id, item.lease.paid_rent)"
                >已付：￥{{ item.lease.paid_rent }}/￥{{ item.rent_total }}</el-button> -->
                已付：￥{{ item.lease.paid_rent }}/￥{{ item.rent_total }}
              </p>
              <p style="margin-top:5px" class="color-999 font-12 bold-font">
                <!-- <el-button
                  size="mini"
                  type="warning"
                >已结租金￥{{ item.lease.settle_amount }}</el-button> -->
                已结租金￥{{ Number(item.lease.settle_amount).toFixed(2) }}
              </p>
            </div>
            <div
              style="width:5%"
              class="flex flex-center font-12 color-666"
            >{{ item.is_buy_out==1?'可买断':'不可买断' }}</div>
            <div
              style="width:7%"
              class="flex flex-column flex-center"
            >
              <template v-if="JSON.stringify(item.lease.next)!=='[]'">
                <p class="font-12 color-666">￥{{ item.lease.next.amount }}</p>
                <p class="font-12 color-666">{{ item.lease.next.date }}</p>
              </template>
            </div>
            <div style="width:16%">
              <p class="flex align-center justify-between font-12 color-666">
                <span>{{ item.realname }}</span>
                <span>{{ item.address_mobile }}</span>
              </p>
              <p
                class="font-12 color-666"
                style="word-break:break-all;"
              >{{ item.prov+item.city+item.area+item.address }}</p>
              <p style="margin-top:10px">
                <el-button
                  v-if="$hasMethod('#editAddress')"
                  size="mini"
                  class="border-btn"
                  @click="editAddress(item)"
                >修改地址</el-button>
              </p>
            </div>
          </div>
          <div class="flex item_row_1">
            <div
              style="width:64%"
              class="detail"
            >
              <p class="color-666">认证资料：{{ item.cert_name }}（{{ item.cert_no }}）手机号：{{ item.mobile }}，人脸识别{{ item.backResult==1?'通过':'不通过' }} 性别：{{ item.authentic.sex }} 年龄：{{ item.authentic.age }}
                <el-button
                  v-if="item.idcard_back&&item.idcard_front&&$hasMethod('#checkAuthInfo')"
                  size="mini"
                  class="border-btn"
                  @click="checkAuthInfo(item)"
                >认证资料</el-button>
                <el-button
                  size="mini"
                  class="border-btn"
                  @click="openChangePhone(item)"
                >修改手机</el-button>
              </p>
              <p
                class="color-666"
                style="margin:10px 0"
                :class="{'red-font':item.is_skip==1}"
              >
                <!-- 风控信息：{{ item.is_skip==1?'【未风控】商家跳过风控':item.risk }} -->
                风控信息：{{ item.risk }}
                <el-button
                  size="mini"
                  :type="item.isBairong == 1 ? 'primary':'success'"
                  @click="lookBairong(item)"
                >{{ item.isBairong == 1 ? '查询百融数据' : '查看百融报告' }}</el-button>
              </p>
              <!--<p
                class="color-666"
                :class="{'red-font':item.is_skip==1}"
              >
                百融风控：
                <el-button
                  v-if="item.is_skip!=1 && item.status == 9"
                  size="mini"
                  class="border-btn"
                  @click="openTip(item)"
                >手动风控</el-button>
                <el-button
                  v-else-if="item.isBairong == 2"
                  size="mini"
                  class="border-btn"
                  @click="getTip(item)"
                >查看百融报告</el-button>
                <span v-else>--</span>
              </p>-->
              <p class="color-666 red-font">紧急联系人：{{ item.emergency_contact }}<el-button
                v-if="$hasMethod('#addRemark')"
                size="mini"
                class="border-btn"
                @click="addEmergencyContact(item.id)"
              >添加联系人</el-button></p>
            </div>
            <div
              style="width:36%"
              class="flex flex-column justify-center"
            >
              <p v-if="item.orderRefundReason" style="padding:0 10px">
                退款原因：{{ item.orderRefundReason }}
              </p>
              <p v-if="item.is_renewal==1" style="margin-left: 10px">
                原订单号：<span class="blue-font">{{ item.parent_order_no }}</span>
              </p>
              <p v-if="item.is_abnormal==1 && [41,42,43,44,45,49,60,65].indexOf(item.status) > -1" class="red-font" style="margin-left: 10px;">该订单提前归还</p>
              <p v-if="item.check_refuse_reason && item.status==43" class="red-font" style="margin-left: 10px">审核拒绝原因：{{ item.check_refuse_reason }}</p>
              <p class="color-666 font-12">用户备注：{{ item.remark }}</p>
              <p class="color-666 font-12">客服备注：
                <template v-if="JSON.stringify(item.orderRemark)!=='[]'">
                  {{ item.orderRemark.create_time }}，{{ item.orderRemark.username }}添加备注：{{ item.orderRemark.remark }}
                  <span
                    v-if="$hasMethod('#checkRemark')"
                    class="blue-font pointer"
                    style="margin-right:10px"
                    @click="viewRemark(item.id)"
                  >查看备注记录</span>
                </template>
                <el-button
                  v-if="$hasMethod('#addRemark')"
                  size="mini"
                  class="border-btn"
                  @click="addRemark(item.id)"
                >添加备注</el-button>
              </p>
              <p
                class="color-666"
                style="margin-top:5px"
              >
                <template v-if="JSON.stringify(item.leaseFlow)!=='[]'">
                  第{{ item.leaseFlow.which_period }}期通过支付宝{{ item.leaseFlow.pay_type==1?'智能合同代扣':item.leaseFlow.pay_type==2?'芝麻信用':item.leaseFlow.pay_type==3?'花呗':'主动支付' }}{{ item.leaseFlow.status==1?'支付'+item.leaseFlow.rent+'元':item.leaseFlow.status==2?'退款'+item.leaseFlow.rent+'元':item.leaseFlow.status==3?'买断':'未支付' }}
                </template>
                <el-button
                  v-if="$hasMethod('#checkFlow')"
                  size="mini"
                  class="border-btn"
                  @click="viewFlow(item.trade_no)"
                >流水记录</el-button>
              </p>
            </div>
          </div>
          <div class="flex item_row_1" style="justify-content: center;">
            <p class="btns align-center">
              <el-button
                v-if="item.status==10&&$hasMethod('#delivery')"
                size="mini"
                type="warning"
                @click="openDelivery(item.id)"
              >订单发货</el-button>
              <el-button
                v-if="item.status==20&&$hasMethod('#receipt')"
                size="mini"
                type="warning"
                @click="confirmReceipt(item.id)"
              >确认收货</el-button>
              <el-button
                v-if="item.status==44&&$hasMethod('#confirmR')"
                size="mini"
                type="warning"
                @click="confirmReturn(item.id)"
              >确认归还</el-button>
              <!-- <el-button
                  v-if="item.status==45"
                  size="mini"
                  type="warning"
                  @click="finishReturn(item.id)"
                >归还完成</el-button> -->
              <el-button
                v-if="[20,30,31,32,33,34,39,40,41,42,43,44,45,49,50,51,52,56,57,58].indexOf(item.status)>-1&&$hasMethod('#checkLogistics')"
                size="mini"
                type="primary"
                @click="checkLogistics(item.id)"
              >查看物流</el-button>
              <el-button
                v-if="[3,9,10,11,12,13,14,15,16,20,30,31,32,33,34,39,40,41,42,43,44,45,49,50,51,52,56,57,58,60,61,62,63,64,65].indexOf(item.status)>-1&&item.pact_url!=0&&item.sign_status==2"
                size="mini"
                type="primary"
                @click="checkPact($globalObj.imgBaseUrl+item.pact_url)"
              >查看合同</el-button>
              <el-button
                v-if="[11,12,13,14].indexOf(item.status)>-1"
                size="mini"
                type="warning"
                @click="handleRefundOrder(item.trade_no)"
              >去处理</el-button>
              <el-button
                v-if="[9,10,11,12,13,14,20,30,31,32,33,34,39,40,41,42,43,44,45,49,50,51,52,56,57,58].indexOf(item.status)>-1&&item.pay_type==2&&$hasMethod('#finish')"
                size="mini"
                class="border-btn"
                @click="finishOrder(item.id)"
              >交易完成</el-button>
              <el-button
                v-if="item.status==41&&$hasMethod('#agree')"
                size="mini"
                type="warning"
                @click="agreeReturn(item.id)"
              >同意归还</el-button>
              <el-button
                v-if="item.status==41&&$hasMethod('#refuse')"
                size="mini"
                type="danger"
                @click="refuseReturn(item.id)"
              >拒绝归还</el-button>
              <el-button
                v-if="[2,3,9,10].indexOf(item.status) > -1 &&$hasMethod('#close')"
                size="mini"
                type="danger"
                @click="closeOrder(item.id)"
              >关闭订单</el-button>
              <el-button
                v-if="[
                  20,30,31,32,33,34,40,41,42,43,44,45,50,51,52,60,61,62,63,64,65
                ].indexOf(item.status) > -1 && item.isPolicy == 0 && item.getPolicy == 0"
                size="mini"
                type="success"
                @click="openPolicy(item.trade_no)"
              >投保信息</el-button>
              <el-button
                v-if="[
                  20,30,31,32,33,34,40,41,42,43,44,45,50,51,52,60,61,62,63,64,65
                ].indexOf(item.status) > -1 && item.isTWC == 0"
                size="mini"
                type="success"
                @click="openTWC(item.id)"
              >蚂蚁链信息</el-button>
              <el-button
                size="mini"
                class="border-btn"
                @click="saveTWC(item.id)"
              >手动存证</el-button>
              <el-button
                size="mini"
                class="border-btn"
                @click="openHandTWC(item.id)"
              >查看手动存证</el-button>
              <el-button
                size="mini"
                class="border-btn"
                @click="supplement(item.id)"
              >补充协议</el-button>
              <el-button
                :loading="wongIsLoading"
                size="mini"
                type="primary"
                @click="putLevinwang(item)"
              >提交征信查询申请</el-button>
              <!-- <el-button
                  size="mini"
                  type="success"
                  @click="signE(item)"
                >
                  签署合同
                </el-button> -->
            </p>
          </div>
        </div>
      </div>
      <custom-page
        ref="customPage"
        :total="total"
        @getList="getList"
      />
    </div>
    <check-lease
      ref="checkLease"
      :order-id="selectedId"
    />
    <set-address
      ref="setAddress"
      :edit-item="editItem"
      @getList="getList"
    />
    <set-device
      ref="setDevice"
      :edit-item="editItem"
      @getList="getList"
    />
    <set-remark
      ref="setRemark"
      :order-id="selectedId"
      @getList="getList"
    />
    <check-remark
      ref="checkRemark"
      :order-id="selectedId"
    />
    <check-flow
      ref="checkFlow"
      :order-no="selectedId"
    />
    <delivery
      ref="delivery"
      :order-id="selectedId"
      @getList="getList"
    />
    <receipt
      ref="receipt"
      :order-id="selectedId"
      @getList="getList"
    />
    <auth-info
      ref="authInfo"
      :edit-item="editItem"
      @getList="getList"
    />
    <check-bill
      ref="checkBill"
      :order-id="selectedId"
    />
    <check-logistics
      ref="checkLogistics"
      :order-id="selectedId"
    />
    <set-true-price
      ref="setTruePrice"
      :edit-item="editItem"
      @getList="getList"
    />
    <twc-log
      ref="twcLog"
      :order-id="selectedId"
    />
    <twc-policy
      ref="twcPolicy"
      :order-id="selectedId"
    />
    <bairong-info
      ref="bairongInfo"
      :order-id="selectedId"
    />
    <twc-hand-log
      ref="twcHandLog"
      :order-id="selectedId"
    />
    <!-- 拒绝归还 -->
    <el-dialog title="拒绝归还" :visible.sync="returnVisible" width="500px">
      <el-form :model="returnForm">
        <el-form-item label="拒绝原因" label-width="120px">
          <el-input
            v-model="returnForm.checkRefuseReason"
            autocomplete="off"
            placeholder="请输入拒绝原因"
            type="text"
            maxlength="50"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeReturn">取 消</el-button>
        <el-button type="primary" @click="confirmReturnVisible">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 手动存证 -->
    <el-dialog title="手动存证" :visible.sync="saveTWCVisible" width="500px">
      <el-form :model="returnForm">
        <el-form-item label="证据选项" label-width="120px">
          <el-select v-model="file_option" placeholder="请选择">
            <el-option
              v-for="item in file_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="证据录入类型" label-width="120px">
          <el-select v-model="file_type" placeholder="请选择">
            <el-option
              v-for="item in file_types"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="上传文件" label-width="120px">
          <el-upload
            action="string"
            class="avatar-uploader"
            :show-file-list="false"
            :http-request="httpRequest"
            :before-upload="beforeUpload"
          >
            <span v-if="fileUrl">{{ fileUrl }}</span>
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="saveTWCVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmSaveTWCVisible">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 紧急联系人 -->
    <el-dialog title="紧急联系人" :visible.sync="emergencyVisible" width="500px">
      <el-form :model="returnForm">
        <el-form-item label="电话" label-width="120px">
          <el-input
            v-model="emergencyForm.emergency_contact"
            placeholder="请输入紧急联系人电话"
            type="textarea"
            :rows="2"
            maxlength="50"
          />
        </el-form-item>
      </el-form>
      <div style="color:red;margin-left:40px">
        注：请用“，”分隔电话号码。例如：13333333333，14444444444
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="emergencyVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEmergencyContact">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改套餐 -->
    <el-dialog title="修改套餐" :visible.sync="setmealVisible" width="500px">
      <el-form :model="returnForm">
        <el-form-item label="选择套餐" label-width="120px">
          <el-select v-model="newSetmeal" placeholder="请选择">
            <el-option
              v-for="item in setmeal"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="setmealVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveSetmealContact">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 补充协议 -->
    <el-dialog title="补充协议" :visible.sync="supplementVisible" width="600px">
      <div style="display:flex">
        <el-checkbox-group v-model="checkList">
          <el-checkbox label="设备型号" />
          <el-checkbox label="总租金" />
          <el-checkbox label="商品押金" />
          <el-checkbox label="买断价" />
          <el-checkbox label="租期" />
        </el-checkbox-group>
        <el-button type="text" style="margin-top: -11px;margin-left: 20px;" @click="checkSuppleFile">查看协议></el-button>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="supplementVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmSupplementVisible">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 补充协议详情 -->
    <el-dialog title="补充协议" :visible.sync="supplementInfoVisible" width="700px">
      <div v-for="(item,index) of checkList" :key="index">
        <div style="margin-top:10px">1.{{ index + 1 }}{{ item }}</div>
        <div v-if="item == '设备型号'" style="margin-top:10px;margin-bottom:40px;line-height:40px">原合同正文第1.1条中的设备型号由原
          <el-input
            v-model="changeForm.preModel"
            style="width:100px"
            placeholder="请输入"
            size="small"
          />
          变为<el-input
            v-model="changeForm.newModel"
            style="width:100px"
            placeholder="请输入"
            size="small"
          />
        </div>
        <!---->
        <div v-if="item == '总租金'" style="margin-top:10px;margin-bottom:40px;line-height:40px">原合同总租金由原
          <el-input
            v-model="changeForm.preTotal"
            style="width:100px"
            placeholder="请输入"
            size="small"
          />
          变更为<el-input
            v-model="changeForm.newTotal"
            style="width:100px"
            placeholder="请输入"
            size="small"
          />
          ;每次租金付款日详见用户端“账单详情”或营运后台“账单列表”
        </div>
        <!---->
        <div v-if="item == '商品押金'" style="margin-top:10px;margin-bottom:40px;line-height:40px">原合同商品押金由原
          <el-input
            v-model="changeForm.preForegift"
            style="width:100px"
            placeholder="请输入"
            size="small"
          />
          变更为<el-input
            v-model="changeForm.newForegift"
            style="width:100px"
            placeholder="请输入"
            size="small"
          />
          ;已付押金（已冻结）为
          <el-input
            v-model="changeForm.nowForegift"
            style="width:100px"
            placeholder="请输入"
            size="small"
          />
        </div>
        <!---->
        <div v-if="item == '买断价'" style="margin-top:10px;margin-bottom:40px;line-height:40px">原合同买断价由原
          <el-input
            v-model="changeForm.preBuyOut"
            style="width:100px"
            placeholder="请输入"
            size="small"
          />
          变更为<el-input
            v-model="changeForm.newBuyOut"
            style="width:100px"
            placeholder="请输入"
            size="small"
          />
        </div>
        <!---->
        <div v-if="item == '租期'" style="margin-top:10px;margin-bottom:40px;line-height:40px">原合同租期由原
          <el-input
            v-model="changeForm.preLease"
            style="width:100px"
            placeholder="请输入"
            size="small"
          />
          变更为<el-input
            v-model="changeForm.newLease"
            style="width:100px"
            placeholder="请输入"
            size="small"
          />
          ;每次租金付款日详见用户端“账单详情”或营运后台“账单列表”
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="supplementInfoVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmSupplementInfoVisible">确 定</el-button>
      </div>
    </el-dialog>

    <chechUrl-dialog
      ref="chechUrlDialog"
      :select-row="selectRow"
      @getList="getList"
    />

    <el-dialog
      width="600px"
      title="修改手机号"
      :visible.sync="dialogVisible_phone"
      :close-on-click-modal="false"
    >
      <div>
        <p class="text-center img_header">用户手机号</p>
        <el-input
          v-model="change_mobile"
          placeholder="请输入电话"
          type="text"
          maxlength="50"
        />
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="changeMemberMobile"
        >修改用户手机号</el-button>
        <el-button
          type="primary"
          @click="dialogVisible_phone=false"
        >关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { changeMemberMobile } from '@/api/order'
import { checkRiskCredit, Levinwang } from '@/api/marketing'
import chechUrlDialog from '../service/components/chechUrl'
import { uploadFile } from '@/api/index'
import globalData from '../../utils/global'
import customPage from '@/components/customPage'
import myDatePicker from '@/components/myDatePicker'
import {
  orderList,
  getOrderStatus,
  orderListExport,
  orderFinish,
  orderReturnAgree,
  orderReturnRefuse,
  orderComfirmReturn,
  orderReturnFinish,
  orderClose,
  handSignEsign,
  getSupplementList
} from '@/api/order'
import { handChargeService, handTWCFile, createContractSupplement, saveEmergencyContact, changeSetmeal } from '@/api/order'
import checkLease from './dialogs/checklease'
import setAddress from './dialogs/setAddress'
import setDevice from './dialogs/setDevice'
import setRemark from './dialogs/setRemark'
import checkRemark from './dialogs/checkRemark'
import checkFlow from './dialogs/checkFlow'
import delivery from './dialogs/delivery'
import receipt from './dialogs/receipt'
import authInfo from './dialogs/authInfo'
import checkBill from './dialogs/checkBill'
import checkLogistics from './dialogs/checkLogistics'
import setTruePrice from './dialogs/setTruePrice.vue'
import twcLog from './dialogs/twcLog'
import twcPolicy from './dialogs/twcPolicy'
import bairongInfo from './dialogs/bairongInfo'
import twcHandLog from './dialogs/twcHandLog'
import { getGoodsSetmealList } from '@/api/goods'
export default {
  components: { myDatePicker, customPage, checkLease, setAddress, setDevice, setRemark, checkRemark, checkFlow, delivery, receipt, authInfo, checkBill, checkLogistics, setTruePrice, twcLog,
    twcPolicy, bairongInfo, twcHandLog, chechUrlDialog },
  data() {
    return {
      searchForm: {
        orderNo: '',
        goodsName: '',
        receivingName: '',
        receivingMobile: '',
        riskName: '',
        riskMobile: '',
        orderStatus: '',
        orderCreateTime: ''
      },
      statusList: globalData.orderStatus,
      total: 0,
      tableData: [],
      activeName: 'all',
      tabList: [
        {
          id: 'all',
          name: '全部订单',
          count: 0
        },
        {
          id: 'notPay',
          name: '待付款订单',
          count: 0
        },
        {
          id: 'notRisk',
          name: '待风控订单',
          count: 0
        },
        {
          id: 'deliveredNot',
          name: '待发货订单',
          count: 0
        },
        {
          id: 'deliveredIs',
          name: '已发货订单',
          count: 0
        },
        {
          id: 'orderIng',
          name: '租用中订单',
          count: 0
        },
        {
          id: 'orderCompleted',
          name: '交易完成订单',
          count: 0
        },
        {
          id: 'orderCancel',
          name: '取消订单',
          count: 0
        },
        {
          id: 'orderReturn',
          name: '归还订单',
          count: 0
        },
        {
          id: 'orderBuyout',
          name: '买断订单',
          count: 0
        },
        {
          id: 'orderRenewal',
          name: '续租订单',
          count: 0
        },
        {
          id: 'orderApplyRefund',
          name: '申请退款',
          count: 0
        },
        {
          id: 'orderRefund',
          name: '退款订单',
          count: 0
        }
      ],
      selectedId: '',
      editItem: {},
      selectList: [],
      returnVisible: false,
      refuseId: '',
      returnForm: {
        checkRefuseReason: ''
      },
      // 手动存证
      saveTWCVisible: false,
      fileUrl: null,
      file_options: [
        {
          value: 0,
          label: '快递出库存证'
        },
        {
          value: 1,
          label: '用户身份证存证'
        },
        {
          value: 2,
          label: '双方补充协议存证'
        },
        {
          value: 3,
          label: '用户人脸存证'
        },
        {
          value: 4,
          label: '用户线下付款存证'
        },
        {
          value: 5,
          label: '催交证据存证'
        },
        {
          value: 6,
          label: '其他证据存证'
        },
        {
          value: 7,
          label: '企业信息存证'
        }
      ],
      file_types: [
        {
          value: 0,
          label: '图片'
        },
        {
          value: 1,
          label: '文件'
        },
        {
          value: 2,
          label: '音频'
        },
        {
          value: 3,
          label: '视频'
        }
      ],
      file_option: 0,
      file_type: 0,
      file_order_id: '',
      fileSize: '20M',
      // 补充协议
      supplementVisible: false,
      checkList: [],
      supplementInfoVisible: false,
      changeForm: {
        preModel: '',
        newModel: '',
        preTotal: '',
        newTotal: '',
        preForegift: '',
        newForegift: '',
        nowForegift: '',
        preBuyOut: '',
        newBuyOut: '',
        preLease: '',
        newLease: ''
      },
      // 紧急联系人
      emergencyVisible: false,
      emergencyForm: {
        emergency_contact: '',
        order_id: ''
      },
      // 修改套餐
      setmealVisible: false,
      setmeal: [],
      newSetmeal: '',
      setmealForm: {
        setmealId: '',
        orderId: ''
      },

      isHashBairong: false,
      selectRow: null,

      wongIsLoading: false, // 征信按钮

      dialogVisible_phone: false,
      change_mobile: ''
    }
  },
  mounted() {
    if (this.$route.params.orderId) {
      this.searchForm.orderNo = this.$route.params.orderId
    }
    this.getSelect()
    this.getList()
  },
  methods: {
    openChangePhone(row) {
      this.selectRow = row
      this.change_mobile = row.address_mobile
      this.dialogVisible_phone = true
    },
    changeMemberMobile() {
      const data = {
        order_uid: this.selectRow.uid,
        member_mobile: this.change_mobile
      }
      changeMemberMobile(data).then(
        res => {
          this.$message.success('修改成功')
          this.getList()
          this.dialogVisible_phone = false
        }
      )
    },
    // 征信
    putLevinwang(row) {
      this.$confirm('单次查询需要支付17元，确定要查询吗？', '查询征信', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.wongIsLoading = true
        Levinwang({ order_id: row.id }).then(res => {
          this.wongIsLoading = false
          this.$message.success(res.msg)
        }).catch(res => {
          this.wongIsLoading = false
        })
      }).catch(() => { })
    },
    lookBairong(row) {
      this.selectRow = row
      this.selectRow.order_id = row.id
      // 未进行百融
      if (row.isBairong == 1) {
        checkRiskCredit({ order_id: row.id }).then(res => {
          this.$refs.chechUrlDialog.dialogVisible = true
        })
      } else {
        this.$refs.chechUrlDialog.dialogVisible = true
      }
    },
    // 更改套餐
    editSetmeal(item) {
      this.setmealVisible = true
      this.setmealForm.orderId = item.id
      getGoodsSetmealList(item.goods_id).then(res => {
        this.setmeal = res.setmeal
      })
    },
    saveSetmealContact() {
      this.setmealVisible = false
      this.setmealForm.setmealId = this.newSetmeal
      changeSetmeal(this.setmealForm).then(res => {
        this.getList()
      })
    },
    // 打开紧急联系人
    addEmergencyContact(id) {
      this.emergencyForm.order_id = id
      this.emergencyVisible = true
    },
    saveEmergencyContact() {
      const that = this
      saveEmergencyContact(this.emergencyForm).then(res => {
        that.$message({
          message: '添加成功',
          type: 'success'
        })
        that.emergencyVisible = false
        that.getList()
      })
    },
    // 补充协议
    supplement(id) {
      this.file_order_id = id
      this.checkList = []
      this.changeForm = {
        preModel: '',
        newModel: '',
        preTotal: '',
        newTotal: '',
        preForegift: '',
        newForegift: '',
        nowForegift: '',
        preBuyOut: '',
        newBuyOut: '',
        preLease: '',
        newLease: ''
      }
      this.supplementVisible = true
    },
    confirmSupplementVisible() {
      if (this.checkList.length <= 0) {
        this.$message({
          message: '请选择协议内容',
          type: 'error'
        })
        return false
      }
      this.supplementInfoVisible = true
    },
    checkSuppleFile() {
      getSupplementList({ order_id: this.file_order_id }).then(res => {
        const a = document.createElement('a')
        a.href = this.$globalObj.imgBaseUrl + res[0].file_url
        a.target = '_blank'
        a.download = res[0].file_url
        a.click()
      })
    },
    // 确定协议
    confirmSupplementInfoVisible() {
      let info = ''
      this.checkList.forEach(res => {
        if (res == '设备型号') {
          info += '原合同正文第1.1条中的设备型号由原' + this.changeForm.preModel + '变为' + this.changeForm.newModel + '\n'
        }

        if (res == '总租金') {
          info += '原合同总租金由原' + this.changeForm.preTotal + '变更为' + this.changeForm.newTotal + ';每次租金付款日详见用户端“账单详情”或营运后台“账单列表”\n'
        }

        if (res == '商品押金') {
          info += '原合同商品押金由原' + this.changeForm.preForegift + '变更为' + this.changeForm.newForegift + ';已付押金（已冻结）为' + this.changeForm.nowForegift + '\n'
        }

        if (res == '买断价') {
          info += '原合同买断价由原' + this.changeForm.preBuyOut + '变更为' + this.changeForm.newBuyOut + '\n'
        }

        if (res == '租期') {
          info += '原合同租期由原' + this.changeForm.preLease + '变更为' + this.changeForm.newLease + ';每次租金付款日详见用户端“账单详情”或营运后台“账单列表”\n'
        }
      })
      const data = {
        'order_id': this.file_order_id,
        'info': info
      }
      createContractSupplement(data).then(res => {
        if (res.status == 200) {
          this.$message({
            message: '签署成功',
            type: 'success'
          })
          this.supplementInfoVisible = false
        }
      })
    },
    // 手动存证
    saveTWC(id) {
      this.file_order_id = id
      this.fileUrl = null
      this.file_option = 0
      this.file_type = 0
      this.saveTWCVisible = true
    },
    openHandTWC(id) {
      this.selectedId = id
      this.$refs.twcHandLog.dialogVisible = true
    },
    confirmSaveTWCVisible() {
      if (!this.fileUrl) {
        this.$message({
          message: '请选择存证文件',
          type: 'error'
        })
        return false
      }
      const data = {
        order_id: this.file_order_id,
        option: this.file_option,
        type: this.file_type,
        fileUrl: this.fileUrl
      }
      handTWCFile(data).then(res => {
        if (res.status) {
          this.$message({
            message: '存证成功',
            type: 'success'
          })
          this.saveTWCVisible = false
        }
      })
    },
    // 上传前对文件的大小进行判断
    beforeUpload(file) {
      this.fileInfo = file
      let isFileSize = true
      const hasAccept = true
      let isSize = true
      if (this.fileSize) {
        const size = parseInt(this.fileSize.slice(0, -1))
        if (this.fileSize.indexOf('K') > -1) {
          isFileSize = file.size / 1024 < size
        }
        if (this.fileSize.indexOf('M') > -1) {
          isFileSize = file.size / 1024 / 1024 < size
        }
        if (!isFileSize) {
          this.$message({
            message: '上传文件大小不能超过' + this.fileSize,
            type: 'error'
          })
          return false
        }
      }
      // if (this.accept) {
      //   const fileExt = file.name.substring(file.name.lastIndexOf('.'))
      //   const list = this.accept.split(',')
      //   hasAccept = !!list.find(item => item === fileExt)
      //   if (!hasAccept) {
      //     this.$message({
      //       message: '上传文件类型必须为' + this.accept,
      //       type: 'error'
      //     })
      //     return false
      //   }
      // }
      if (this.alwaysCrop) {
        this.option.img = URL.createObjectURL(file)
        this.dialogVisible = true
        return false
      }
      if (this.imgWidth || this.imgHeight || this.minWidth || this.minHeight || this.isSquare) {
        isSize = this.sizeCheck(file)
      }
      return isFileSize && hasAccept && isSize
    },
    // 覆盖默认上传行为
    httpRequest(params) {
      const fd = new FormData()
      fd.append('file', params.file)
      uploadFile(fd).then(res => {
        if (res) {
          this.fileUrl = res.file
        }
      })
    },
    openTWC(id) {
      this.selectedId = id
      this.$refs.twcLog.dialogVisible = true
    },
    // 打开保单界面
    openPolicy(id) {
      this.selectedId = id
      this.$refs.twcPolicy.dialogVisible = true
    },
    // 设置拿货价
    editGoodTruePrice(item) {
      this.editItem = {
        orderId: item.id,
        deviceTruePrice: item.device_true_price ? item.device_true_price.split(',') : [],
        amount: item.amount
      }
      this.$refs.setTruePrice.dialogVisible = true
    },
    // 打开百融风控报告
    getTip(row) {
      this.selectedId = row.id
      this.$refs.bairongInfo.dialogVisible = true
    },
    // 手动风控
    openTip(row) {
      // debugger
      // this.$alert('商家暂未开启风控', '提示', {
      //   confirmButtonText: '确定',
      // }).then(() => { });
      const content = {
        order_id: row.id
      }
      handChargeService(content).then(res => {
        this.getList()
      })
    },
    handleRefundOrder(tradeNo) {
      this.$router.push({ name: 'refundList', params: { tradeNo }})
    },
    // 查看合同
    checkPact(url) {
      window.open(url)
    },
    // 订单完结
    finishOrder(id) {
      this.$confirm('交易完成后进行解约现有款项不退款，并解约代扣无法发起未代扣的期数！', '请确认是否交易完成？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        orderFinish(id).then(res => {
          this.getList()
        })
      }).catch(() => { })
    },
    // 同意归还
    agreeReturn(id) {
      this.$confirm('确定要同意归还吗？', '同意归还', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        orderReturnAgree(id).then(res => {
          this.getList()
        })
      }).catch(() => { })
    },
    // 拒绝归还
    refuseReturn(id) {
      this.refuseId = id
      this.returnVisible = true
    },
    // 订单关闭
    closeOrder(id) {
      this.$confirm('确定要关闭订单吗？', '关闭', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        orderClose(id).then(res => {
          this.getList()
        })
      }).catch(() => {})
    },
    closeReturn() {
      this.returnVisible = false
      this.returnForm.checkRefuseReason = ''
    },
    confirmReturnVisible() {
      if (!this.returnForm.checkRefuseReason) {
        this.$message.warning('拒绝原因不能为空')
        return false
      }
      orderReturnRefuse({
        orderId: this.refuseId,
        checkRefuseReason: this.returnForm.checkRefuseReason
      }).then((res) => {
        this.getList()
        this.closeReturn()
      }).catch(() => {})
    },
    // 确认归还
    confirmReturn(id) {
      this.$confirm('确定要归还吗？', '确认归还', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        orderComfirmReturn(id).then(res => {
          this.getList()
        })
      }).catch(() => { })
    },
    // 归还完成
    // finishReturn(id){
    //   orderReturnFinish(id).then(res => {
    //     this.getList();
    //   });
    // },
    // 查看物流
    checkLogistics(id) {
      this.selectedId = id
      this.$refs.checkLogistics.dialogVisible = true
    },
    // 查看已付账单详情
    checkPaidBill(id, paid_rent) {
      if (this.$hasMethod('#checkBill') && paid_rent > 0) {
        this.selectedId = id
        this.$refs.checkBill.dialogVisible = true
      }
    },
    // 查看认证资料
    checkAuthInfo(item) {
      this.editItem = {
        idcard_back: item.idcard_back,
        idcard_front: item.idcard_front,
        address_mobile: item.mobile,
        uid: item.uid
      }
      this.$refs.authInfo.dialogVisible = true
    },
    // 确认收货
    confirmReceipt(id) {
      this.selectedId = id
      this.$refs.receipt.dialogVisible = true
    },
    // 订单发货
    openDelivery(id) {
      this.selectedId = id
      this.$refs.delivery.dialogVisible = true
    },
    // 查看流水记录
    viewFlow(trade_no) {
      this.selectedId = trade_no
      this.$refs.checkFlow.dialogVisible = true
    },
    // 查看客服备注
    viewRemark(id) {
      this.selectedId = id
      this.$refs.checkRemark.dialogVisible = true
    },
    // 添加客服备注
    addRemark(id) {
      this.selectedId = id
      this.$refs.setRemark.dialogVisible = true
    },
    // 更改设备编号
    editDevice(item) {
      this.editItem = {
        orderId: item.id,
        deviceNumber: item.device_number ? item.device_number.split(',') : [],
        amount: item.amount
      }
      this.$refs.setDevice.dialogVisible = true
    },
    // 修改地址
    editAddress(item) {
      this.editItem = {
        orderId: item.id,
        realname: item.realname,
        mobile: item.address_mobile,
        address: item.address,
        prov: item.prov,
        city: item.city,
        area: item.area,
        province: [item.prov, item.city, item.area]
      }
      this.$refs.setAddress.dialogVisible = true
    },
    // 查看租期
    viewLease(id) {
      this.selectedId = id
      this.$refs.checkLease.dialogVisible = true
    },
    getOrderStatusType(status) {
      const obj = this.statusList.find(item => item.id == status)
      return obj ? obj.type : 'warning'
    },
    getOrderStatusName(status) {
      const obj = this.statusList.find(item => item.id == status)
      return obj ? obj.name : ''
    },
    // 获取数据
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage
      if (!flag) {
        this.tableData = []
      }
      orderList({
        page,
        pageSize,
        ...this.searchForm,
        orderStatusGroup: this.activeName
      }).then(res => {
        const { list, count } = res
        this.tableData = list.data || []
        this.total = list.total || 0
        for (const item of this.tabList) {
          item.count = count[item.id]
        }
      })
    },
    // 查询
    search() {
      const pickerVal = this.$refs.myDatePicker.getVal()
      if (pickerVal !== 'error') {
        this.searchForm.orderCreateTime = pickerVal
        this.$refs.customPage.page = 1
        this.getList()
      }
    },
    // 重置
    reset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset()
      }
      this.searchForm = {
        orderNo: '',
        goodsName: '',
        receivingName: '',
        receivingMobile: '',
        riskName: '',
        riskMobile: '',
        orderStatus: '',
        orderCreateTime: ''
      }
      this.getList()
    },
    // 导出
    exportFile() {
      const pickerVal = this.$refs.myDatePicker.getVal()
      if (pickerVal !== 'error') {
        this.searchForm.orderCreateTime = pickerVal
        orderListExport({
          ...this.searchForm,
          orderStatusGroup: this.activeName
        })
      }
    },
    handleClick(tab) {
      this.activeName = tab.name
      this.$refs.customPage.page = 1
      this.getList()
    },
    getSelect() {
      getOrderStatus().then(res => {
        const list = []
        for (const key in res) {
          list.push({
            id: key,
            name: res[key]
          })
        }
        this.selectList = list || []
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.common_form_search {
  padding: 15px 30px 0;
}
.child_page {
  padding-bottom: 15px;
  padding-left: 30px;
  padding-right: 30px;
  p,
  div {
    box-sizing: border-box;
  }
}
.list_wrap {
  position: relative;
}
.list_header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  min-height: 50px;
  z-index: 2;
  background: #f5f5f5;
  border: 1px solid #e6e6e6;
  p {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }
  p:not(:first-child) {
    border-left: 1px solid #e6e6e6;
  }
}
.list_item {
  display: block;
  border: 1px solid #e6e6e6;
  margin-top: 10px;
}
.item_row {
  border-top: 1px solid #e6e6e6;
  & > div {
    padding: 10px;
    color: #666666;
    &:not(:first-child) {
      border-left: 1px solid #e6e6e6;
    }
  }
}
.detail,
.btns {
  padding: 10px;
}
.btns {
  // border-left: 1px solid #e6e6e6;
  .el-button + .el-button {
    // margin-left: 0px;
    // margin-right: 10px;
    margin-top: 10px;
  }
}
.border-btn {
  height: 25px;
  padding-top: 0;
  padding-bottom: 0;
  background: #ffffff;
  border: 1px solid $mainBlue;
  border-radius: 3px;
  color: $mainBlue;
  font-size: 12px;
}
.sign_icons img {
  width: 21px;
  height: 23px;
  margin-right: 2px;
}
.item_header {
  padding: 5px 10px;
  background-color: #f5f5f5;
  & > div p {
    color: #666666;
    font-size: 12px;
    padding-left: 20px;
  }
}
.title {
  font-size: 16px;
  line-height: 23px;
  padding-bottom: 15px;
}
.meal,
.device {
  font-size: 12px;
  color: #999999;
  line-height: 23px;
}
.item_row p {
  line-height: 23px;
}
.item_row div {
  line-height: 20px;
}
.avatar-uploader /deep/.el-upload {
  border: 1px dashed #747272;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader /deep/.el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}

.item_row_1 {
  border-top: 1px solid #e6e6e6;
  & > div {
    padding: 10px;
    color: #666666;
    &:not(:first-child) {
      // border-left: 1px solid #e6e6e6;
    }
  }
}
</style>
